<template>
  <el-form
    hide-required-asterisk
    class="form"
    size="small"
    ref="form"
    :model="form"
    :rules="rules"
    label-width="78px"
    :show-message="false">
    <el-form-item :label="$t('名称')" prop="name">
      <el-input
        class="full-width"
        v-model="form.name"
        :placeholder="$t('请输入媒体名称')"
        clearable
        maxlength="99"
        :show-word-limit="false"></el-input>
    </el-form-item>
    <el-form-item :label="$t('类型')">
      <el-select class="full-width" disabled v-model="form.type" :placeholder="$t('请选择')">
        <el-option
          v-for="(o) in fileTypeOpts"
          :key="o.value"
          :value="o.value"
          :label="o.label">
        </el-option>
      </el-select>
    </el-form-item> 
    <el-form-item :label="$t('目录')">
      <el-select-tree
        class="full-width"
        disabled
        v-model="form.folderId"
        :placeholder="$t('请选择')"
        :data="treeData"
        :props="{
          value: 'id',
          label: 'name',
          children: 'children'
        }">
      </el-select-tree>
    </el-form-item>
    <el-form-item :label="$t('起止日期')">
      <div class="flex full-width">
        <el-date-picker
          class="input-170"
          v-model="form.startDate"
          value-format="yyyy-MM-dd"
          type="date"
          :placeholder="$t('开始日期')">
        </el-date-picker>
        <span class="flex-1" style="text-align: center;">{{ $t('至') }}</span>
        <el-date-picker
          class="input-170"
          v-model="form.endDate"
          value-format="yyyy-MM-dd"
          type="date"
          :placeholder="$t('结束日期')"
          :picker-options="{
            disabledDate(time) {
              if (!form.startDate) return false
              return time.getTime() < new Date(form.startDate).getTime() - (3600000 * 24)
            }
          }">
        </el-date-picker>
      </div>
    </el-form-item>
    <el-form-item :label="$t('标签')">
      <tag-setting-input
        class-name="full-width"
        :tag-id.sync="form.tagId"
        :inner-tags.sync="form.innerTags"
        />
    </el-form-item>
    <el-form-item :label="$t('描述')">
      <el-input
        class="full-width"
        v-model="form.comment"
        :rows="3" wrap="off"
        type="textarea"
        maxlength="150"
        :show-word-limit="false"
        clearable></el-input>
    </el-form-item>
    <slot></slot>
  </el-form>
</template>

<script>
import { fileTypeOpts } from '../../const'
import { createNamespacedHelpers } from 'vuex'
const {mapGetters} = createNamespacedHelpers('media')

import TagSettingInput from '../TagSettingInput'

export default {
  components: {
    TagSettingInput
  },
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    rules: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      inputValue: '',
      fileTypeOpts
    }
  },
  methods: {
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue && inputValue !== this.form.tag) {
        this.form.tag = inputValue
      }
      this.inputValue = '';
    },
  },
  computed: {
    ...mapGetters(['menuTree', 'tagTreeWithInner']),
    treeData() {
      return this.menuTree(1)
    },
  },
}
</script>

<style lang="scss" scoped>
.form {
  margin-top: 20px;
  margin-left: 30px;
  ::v-deep .el-form-item {
    margin-bottom: 15px;
  }
}
.full-width {
  width: 378px;
}
.input-170 {
  width: 170px !important;
}
.flex {
  display: flex;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
</style>